<script setup lang="ts">
import {
  Row,
  Col,
  Form,
  FormItem,
  Input,
  Select,
  SelectOption,
  Button,
  Tree,
  Table,
  InputSearch,
  RangePicker,
} from 'ant-design-vue';
import {onBeforeMount, reactive, ref} from "vue";
import type {SysUserReq, SysUserResp} from "#/type/user";
import {getUserPageApi} from "#/api";
import useTreeHook from "./useTreeHook";
import useTableHook from "./useTableHook";
import useFormHook from "./useFormHook";
import ModalBox from "./modalBox.vue";
// ------------------ 表单数据 ----------------------
let formSearch = reactive<SysUserReq>({})
// ------------------ tree数据 ----------------------
// 展开的节点，展开指定的树节点
const treeExpandedKeys = reactive<(string | number)[]>([]);
const treeSelectedKeys = ref<(string | number)[]>([]);
// ------------------ 表格数据 ----------------------
// 分页参数
let tablePagination = reactive<any>({
  total: 0,
  current: 1,
  pageSize: 10,
  pageSizeOptions: ['10', '20', '30', '40'],
  showSizeChanger: true,
  showQuickJumper: true,
  sorter: null,
})
// 表格数据
let tableData = ref<SysUserResp[]>([]);

// 获取表格数据
const fetchTableData = (search: SysUserReq) => {
  getUserPageApi(search).then(res => {
    tableData.value = res.data as SysUserResp[]
    tablePagination.total = res.total as number
    tablePagination.current = res.current as number
    tablePagination.pageSize = res.pageSize as number
  })
}

const {treeSearchValue,treeData,onTreeExpand, onTreeSelect} = useTreeHook(fetchTableData, treeExpandedKeys, treeSelectedKeys, formSearch, tablePagination)
const {tableColumns,tableChange,tableRecordDelete} = useTableHook(fetchTableData, formSearch, tablePagination)
const {formSearchSubmit, formSearchReset, formInputClear,formSelectClear,formDateRangeClear} = useFormHook(fetchTableData, treeSelectedKeys, formSearch, tablePagination)

// 生命周期函数，获取数据
onBeforeMount(() => {
  fetchTableData({current: tablePagination.current, pageSize: tablePagination.pageSize})
})

let modalOpen = ref(false)
let modalData = ref<SysUserResp|null>(null)
const modalBoxShow = (record: SysUserResp|null) => {
  modalData.value = record ? record: {}
  modalOpen.value = true
}
const modalBoxSubmit = () => {
  console.log('模态款确定：')
  modalOpen.value = false
}
</script>

<template>
  <div>
    <Row>
      <Col :span="24" class="w-full mx-4 mt-4 h-12">
        <Form layout="inline" class="flex justify-start">
          <FormItem label="用户名" >
            <Input placeholder="请输入用户名" v-model:value="formSearch.user_name" allow-clear
                   @change="formInputClear('user_name',$event)"/>
          </FormItem>
          <FormItem label="手机号" >
            <Input placeholder="请输入手机号" v-model:value="formSearch.phone" allow-clear
                   @change="formInputClear('phone',$event)"/>
          </FormItem>
          <FormItem label="性别" >
            <Select placeholder="请选择性别" v-model:value="formSearch.sex" allow-clear
                    @change="formSelectClear('sex',$event)">
              <SelectOption :value="1">男</SelectOption>
              <SelectOption :value="2">女</SelectOption>
            </Select>
          </FormItem>
          <FormItem label="状态" >
            <Select placeholder="请选择状态" v-model:value="formSearch.status" allow-clear
                    @change="formSelectClear('status',$event)">
              <SelectOption :value="1">正常</SelectOption>
              <SelectOption :value="0">禁用</SelectOption>
            </Select>
          </FormItem>
          <FormItem label="创建时间" >
            <RangePicker v-model:value="formSearch.create_time_range" format="YYYY-MM-DD" value-format="YYYY-MM-DD" allow-clear
                         @change="(dates: [string, string], dateStrings: [string, string])=>formDateRangeClear('create_time_range',dates,dateStrings)"></RangePicker>
          </FormItem>
          <FormItem class="flex justify-around">
            <Button class="bg-blue-500" @click="formSearchSubmit">查询</Button>
            <Button class="bg-gray-300" @click="formSearchReset">重置</Button>
            <Button class="bg-red-300"  @click="modalBoxShow(null)">新建</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>
    <Row class="h-full">
      <Col :span="4" class="h-full mx-4">
        <InputSearch v-model:value="treeSearchValue" style="margin-bottom: 8px" placeholder="Search" class="mb-5"/>
        <Tree :tree-data="treeData"
              :expandedKeys="treeExpandedKeys"
              @select="onTreeSelect"
              @expand="onTreeExpand"></Tree>
      </Col>
      <Col :span="19" class="h-full">
        <Table :dataSource="tableData" :columns="tableColumns" :pagination="tablePagination" @change="tableChange">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'" >
              <div class="flex justify-evenly">
                <Button type="text" @click="modalBoxShow(record)">编辑</Button>
                <Button type="text" danger @click="tableRecordDelete(record)">删除</Button>
              </div>
            </template>
          </template>
        </Table>
      </Col>
    </Row>
    <ModalBox :open="modalOpen" :data="modalData" @cancel="modalOpen=false" @ok="modalBoxSubmit"/>
  </div>

</template>

<style scoped>

</style>
